<template>
  <div v-if="open" class="fabu">
    <div id="light" v-click-outside="clickOutsideHandler" class="white_content">
      <nuxt-link to="/otc/publish-list">{{ $t('我的发布') }}</nuxt-link>
      <nuxt-link to="/otc/order-status">{{ $t('历史订单') }}</nuxt-link>
      <a href="javascript:void(0)" class="quxiao" @click="hide">{{ $t('取消') }}</a>
    </div>
    <div id="fade" class="black_overlay"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      open: false
    }
  },
  methods: {
    show () {
      this.open = true
    },
    hide () {
      this.open = false
    },
    clickOutsideHandler () {
      if (this.open) {
        this.hide()
      }
    },
    handleCancel () {
      this.$router.back()
    }
  }
}
</script>
<style scoped>
.fabu {
  position: fixed;
  right: 2%;
  top: 8px;
  z-index: 9999;
}
.fabu img {
  width: 20px;
}
.white_content {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: white;
  z-index: 1002;
  overflow: auto;
  text-align: center;
}
.white_content a {
  color: #173e5d;
  font-size: 14px;
  display: block;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #f3f3f3;
  line-height: 40px;
}
.white_content .quxiao {
  border-top: 5px solid #f3f3f3;
}
.black_overlay {
  display: block;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  z-index: 1001;
  background-color: black;
  -moz-opacity: 0.3;
  opacity: 0.3;
  filter: alpha(opacity=33);
}
</style>
